<template>
  <div class="app-container order_detail_content">
    <div>

      <postSale v-if="showData" :postSale="showData" ></postSale>

      <!-- 审核意见 -->
      <div v-if="isShow == '1'">
        <el-form ref="form" :model="form" :rules="rules" label-width="90px">
          <el-form-item label="余额退款" v-if="form.serviceType =='refund' || form.serviceType == 'return'">
            <el-input v-model="form.serviceBalanceStr" @input="form.serviceBalanceStr = oninput(form.serviceBalanceStr, 2)" placeholder="请输入余额" style="width: 200px"/>
          </el-form-item>
          <el-form-item label="现金退款" v-if="form.serviceType =='refund' || form.serviceType == 'return'">
            <el-input v-model="form.serviceCashStr" @input="form.serviceCashStr = oninput(form.serviceCashStr, 2)" placeholder="请输入现金" style="width: 200px"/>
          </el-form-item>

          <el-form-item label="处理意见" prop="remark">
            <el-input v-model="form.remark" type="textarea" style="width: 800px"  :autosize="{ minRows: 2, maxRows: 4}" placeholder="请输入处理意见" />
          </el-form-item>
        </el-form>
      </div>

      <div class="dialog-footer" align="center">
          <el-button type="primary" @click="submitForm(true)">同意售后</el-button>
          <el-button type="primary" @click="submitForm(false)">拒绝售后</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      <!-- <el-form id="selectForm" :model="form" ref="form" v-show="showSearch" label-width="100px">
        <div style="
            padding: 20px;
            background: #fff;
            border-radius: 6px;
            margin-bottom: 15px;
          ">
          <div style="display: flex">
            <div style="width: 25%">
              <div style="
                  font-size: 16px;
                  margin-bottom: 10px;
                  color: #606266;
                  font-weight: bold;
                ">
                订单信息
              </div>
              <el-row>
                <el-col>
                  <el-form-item label="订单编号" width="400px">
                    <span class="itemSpan">{{ form.orderNo }}</span>
                  </el-form-item>
                </el-col>
                <el-col>
                  <el-form-item label="供应商名称" width="400px" v-if="form.supplierName">
                    <span class="itemSpan">{{ form.supplierName }}</span>
                  </el-form-item>
                </el-col>
                <el-col>
                  <el-form-item label="订单金额" width="400px">
                    <span class="itemSpan">{{ form.orderAmountStr }}</span>
                  </el-form-item>
                </el-col>
                <el-col>
                  <el-form-item label="配送方式" width="400px">
                    <span class="itemSpan">{{ form.deliverMethodName }}</span>
                  </el-form-item>
                </el-col>
                <el-col>
                  <el-form-item label="订单类型" width="400px">
                    <span class="itemSpan">{{ form.orderTypeName }}</span>
                  </el-form-item>
                </el-col>
                <el-col>
                  <el-form-item label="订单来源" width="400px">
                    <span class="itemSpan">{{ form.platSourceName }}</span>
                  </el-form-item>
                </el-col>
              </el-row>
            </div>
            <div style="
                background: #fff;
                border-radius: 6px;
                margin-bottom: 15px;
                width: 25%;
              ">
              <div style="
                  font-size: 16px;
                  margin-bottom: 10px;
                  color: #606266;
                  font-weight: bold;
                ">
                支付信息
              </div>
              <el-row> </el-row>

              <el-row>
                <el-col>
                  <el-form-item label="支付方式" width="400px">
                    <span class="itemSpan">{{ form.payMethodName }}</span>
                  </el-form-item>
                </el-col>
                <el-col>
                  <el-form-item label="支付金额" width="400px">
                    <span class="itemSpan">{{ form.payAmountStr }}元</span>
                  </el-form-item>
                </el-col>
                <el-col>
                  <el-form-item label="折扣金额" width="400px">
                    <span class="itemSpan">{{ form.discountAmountStr }}元</span>
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row>
                <el-col>
                  <el-form-item label="代金券金额" width="400px">
                    <span class="itemSpan">{{ form.useCouponAmountStr }}元</span>
                  </el-form-item>
                </el-col>
                <el-col>
                  <el-form-item label="余额支付" width="400px">
                    <span class="itemSpan">{{ form.payByBalanceStr }}元</span>
                  </el-form-item>
                </el-col>
                <el-col>
                  <el-form-item label="物流费用" width="400px">
                    <span class="itemSpan">{{ form.freightAmountStr }}元</span>
                  </el-form-item>
                </el-col>
              </el-row>
            </div>
            <div v-if="form.customerAddressVo" style="
                background: #fff;
                border-radius: 6px;
                margin-bottom: 15px;
                width: 25%;
              ">
              <div style="
                  font-size: 16px;
                  margin-bottom: 10px;
                  color: #606266;
                  font-weight: bold;
                ">
                收件人信息
              </div>
              <el-row>
                <el-col>
                  <el-form-item label="收件人名称" width="400px">
                    <span class="itemSpan">{{ form.customerAddressVo.name }}</span>
                  </el-form-item>
                </el-col>
                <el-col>
                  <el-form-item label="收件人号码" width="400px">
                    <span class="itemSpan">{{ form.customerAddressVo.mobile }}</span>
                  </el-form-item>
                </el-col>
                <el-col>
                  <el-form-item label="收件人地址" width="400px">
                    <span
                      class="itemSpan">{{ form.customerAddressVo.provinceName + form.customerAddressVo.cityName + form.customerAddressVo.countyName + form.customerAddressVo.address  }}</span>
                  </el-form-item>
                </el-col>
                <el-col>
                  <el-form-item label="收件人邮编" width="400px">
                    <span class="itemSpan">{{ form.customerAddressVo.provinceCode }}</span>
                  </el-form-item>
                </el-col>
              </el-row>
            </div>
            <div style="
                background: #fff;
                border-radius: 6px;
                margin-bottom: 15px;
                width: 25%;
              ">
              <div style="
                  font-size: 16px;
                  margin-bottom: 10px;
                  color: #606266;
                  font-weight: bold;
                ">
                客户信息
              </div>
              <el-row>
                <el-col>
                  <el-form-item label="客户名称" width="400px">
                    <span class="itemSpan">{{ form.customerName }}</span>
                  </el-form-item>
                </el-col>
                <el-col>
                  <el-form-item label="手机号码" width="400px">
                    <span class="itemSpan">{{ form.phone }}</span>
                  </el-form-item>
                </el-col>
                <el-col>
                  <el-form-item label="客户留言" width="400px">
                    <span class="itemSpan">{{ form.buyMes }}</span>
                  </el-form-item>
                </el-col>
              </el-row>
            </div>

          </div>
        </div>

        <div v-if="form.deliverList && form.deliverList.length > 0" style="
            padding: 20px;
            background: #fff;
            border-radius: 6px;
            margin-bottom: 15px;
          ">
          <div>
            <div style="
                font-size: 16px;
                margin-bottom: 20px;
                color: #606266;
                font-weight: bold;
              ">
              物流信息
            </div>
            <deliver :deliverList="form.deliverList"></deliver>
          </div>
        </div>

        <div style="
            padding: 20px;
            background: #fff;
            border-radius: 6px;
            margin-bottom: 15px;
          ">
          <div>
            <div style="
                font-size: 16px;
                margin-bottom: 20px;
                color: #606266;
                font-weight: bold;
                position: relative;
              ">
              备注信息 <el-button size="small" style="position: absolute;right:0px;" @click="dialogVisible = true">添加备注
              </el-button>
            </div>
            <span style="color: #606266; font-size: 14px; font-weight: 200">{{form.remark}}</span>
            <el-dialog title="备注" :visible.sync="dialogVisible" width="30%">
              <el-input type="textarea" placeholder="请输入内容" v-model="remarks"></el-input>
              <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="addRemarks">确 定</el-button>
              </span>
            </el-dialog>
          </div>
        </div>

        <div v-if="form.customerInvoiceVo" style="
            padding: 20px;
            background: #fff;
            border-radius: 6px;
            margin-bottom: 15px;
          ">
          <div>
            <div style="
                font-size: 16px;
                margin-bottom: 20px;
                color: #606266;
                font-weight: bold;
              ">
              发票抬头
            </div>

            <customerInvoice :customerInvoiceList="[form.customerInvoiceVo]"></customerInvoice>
          </div>
        </div>

        <div v-if="form.invoice" style="
            padding: 20px;
            background: #fff;
            border-radius: 6px;
            margin-bottom: 15px;
          ">
          <div>
            <div style="
                font-size: 16px;
                margin-bottom: 20px;
                color: #606266;
                font-weight: bold;
              ">
              开票信息
            </div>

            <invoice :invoiceList="[form.invoice]"></invoice>
          </div>
        </div>

      </el-form> -->
    </div>
  </div>
</template>

<script>
  import {
    getInfo,
  } from "@/api/order/info";
  import postSale from "@/components/Order/postSale";
  // import orderItem from "@/components/Order/orderItem";
  // import invoice from "@/components/Order/invoiceList";
  // import customerInvoice from "@/components/Order/customerInvoice";
  // import deliver from "@/components/Order/deliver";
  // import complaint from "@/components/Order/complaintList";

  import {
    getSale,
    addSale,
    updateSale,
    auditSale,
  } from "@/api/order/sale";
  // import ImageUpload from '@/components/ImageUpload';

  export default {
    name: "order",
    components: {
      postSale,
      // orderItem,
      // invoice,
      // deliver,
      // complaint,
      // ImageUpload
    },
    data() {
      return {
        serviceUid: "",
        isShow: "",
        dialogVisible: false,
        zIndex: 3000,
        showSearch: true,
        // 预览图片
        carouselImgs: [],
        detailImgs: [],
        // 表单参数
        form: {},
        //查看详细数据
        showData: {},
        // 表单校验
        rules: {
          remark: [{
            required: true,
            message: "处理意见不能为空",
            trigger: "blur"
          }],
        }
      };
    },
    created() {
      this.isShow = this.$route.query && this.$route.query.type;
      // console.log(typeof(this.isShow))
      this.serviceUid = this.$route.query && this.$route.query.serviceUid;
      this.getInfoData();
    },
    methods: {
      getInfoData() {
        this.showData = null;
        this.form.serviceUid = this.serviceUid;
        getSale(this.serviceUid).then(response => {
          this.showData = response.data;
          this.form.serviceType = this.showData.serviceType;
          this.form.serviceAmount = this.showData.serviceAmount;
          this.form.serviceAmountStr = this.showData.serviceAmountStr;
          this.form.serviceCashStr = this.showData.serviceCashStr;
          this.form.serviceBalanceStr = this.showData.serviceBalanceStr;
          console.log(this.showData)
        });
      },
      /** 提交按钮 */
      submitForm(flag) {
        this.$refs["form"].validate(valid => {
          if (valid) {

            this.form.serviceCash = parseInt(parseFloat(this.form.serviceCashStr) * 100);
            this.form.serviceBalance = parseInt(parseFloat(this.form.serviceBalanceStr) * 100);

            let amount = parseInt(this.form.serviceAmount);
            let money = parseInt(this.form.serviceCash + this.form.serviceBalance);

            if(amount < money){
              return this.msgError("现金退款+余额退款之和不能大于售后金额！");
            }

            this.form.dataStatus = '3'
            if(flag){
              this.form.dataStatus = '4'
            }
            if (this.form.serviceUid != null) {
              auditSale(this.form).then(response => {
                this.msgSuccess("操作成功");
                this.$router.go(-1);
              });
            }
          }
        });
      },
      cancel(){
        this.$router.go(-1);
      }
      // addRemarks() {
      //   this.add = new Object
      //   this.add.orderUid = this.orderUid
      //   this.add.remark = this.remarks
      //   console.log(this.add);
      //   addRemark(this.add).then(response => {
      //     this.form.remark = this.remarks
      //   });

      //   this.dialogVisible = false
      // },
    },
  };
</script>
sty
<style scoped>
  .order_detail_content {
    width: 100%;
    min-height: 100%;
    background-color: #fff;
    padding: 20px 20px 80px 20px;
  }

  #selectForm>>>.el-form-item__label {
    font-size: 12px;
    font-weight: 200;
  }

  #selectForm>>>.el-form-item {
    margin-bottom: 0px;
  }

  #step>>>.el-step__icon-inner {
    display: none;
  }

  .itemSpan {
    font-size: 12px;
    color: #606266;
    font-weight: 100;
  }

  .dialog-footer {
    position: fixed;
      bottom: 0;
      z-index: 10;
      left: 0;
      width: 100%;
      height: 68px;
      padding-left: 120px;
      box-shadow: 0 -2px 8px rgb(200 201 204 / 20%);
      display: flex;
      align-items: center;
      justify-content: center;
      background: #fff;
  }
</style>
